<!--
 * @Desc:
 * @author cheegon
 * @date 2024/07/02  上午10:20
-->
<template>
  <el-dialog v-dialog-drag :title="uploadInfo.title" :visible.sync="isShowPop">
    <el-upload
        class="avatar-uploader"
        action="#"
        :accept="uploadInfo.accept"
        :before-upload="handleBeforeUpload"
        :http-request="handleUploadFile"
        :show-file-list="false">
      <img v-if="imageUrl" :src="imageUrl" class="new-avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" :loading="loading" @click="handleComplete">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import dialogMixin from '@/mixins/dialogMixin'
import { reqUpload } from '@/api/uploadApi'
import { compressAccurately } from 'image-conversion'

const defInfo = () => {
  return {
    fileType: 'img',
    limit: 1,
    maxFileSize: 2,
    title: '图片上传',
    accept: 'image/jpeg,image/jpg,image/png',
    compress: true
  }
}
export default {
  name: "SingeUploadDialog",
  components: {},
  props: [],
  mixins: [dialogMixin],
  data() {
    return {
      uploadInfo: defInfo(),
      uploading: false,
      imageUrl: ''
    }
  },
  created() {
  },
  methods: {
    refresh() {
      this.uploadInfo = Object.assign({}, defInfo(), this.info)
      this.imageUrl = this.info.imageUrl
    },
    handleRemove(item) {
      this.emitInput('')
    },
    handleBeforeUpload(file) {
      if (this.uploadInfo.fileType === 'img') {
        const isJPG = this.judgeImg(file.type)
        const isNormalSize = file.size / 1024 / 1024 < this.uploadInfo.maxFileSize
        if (!isJPG) {
          this.$message.error('上传图片只能是 JPG/PNG 格式!')
          return false
        }
        if (this.uploadInfo.compress) {
          return new Promise((resolve) => {
            if (isNormalSize) {
              resolve(file)
            } else {
              compressAccurately(file, 400).then(res => {
                resolve(res)
              })
            }
          })
        } else {
          if (!isNormalSize) {
            this.$message.warning(`图片过大, 单张图片最大不能超过${ this.uploadInfo.maxFileSize }M`)
            return false
          }
        }
      }
      return true
    },
    handleUploadFile(params) {
      this.loading = true
      let file = params.file
      const form = new FormData()
      form.append('file', file)
      reqUpload(form).then(data => {
        this.emitInput(data.url)
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    handleComplete() {
      //  this.isShowPop = false
      this.$emit("complete", this.imageUrl)
    },
    emitInput(val) {
      this.$emit('input', val)
      this.imageUrl = val
    },
    /**
     * 判断是否是img
     * @param type
     * @returns {boolean}
     */
    judgeImg(type) {
      return type === 'image/jpeg' || type === 'image/jpg' || type === 'image/png'
    },
  }
}
</script>

<style lang="stylus" scoped>
.new-avatar {
  width: 120px;
  height: 120px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
  border: 2px dashed #d9d9d9;
  border-radius: 20px;
}
</style>
